<template>
    <div>
        <!-- 
            绑定属性方法：用v-bind
            v-bind：属性名  可以简写成：
        -->
        <img v-bind:src="url" width="100px" alt="">
        <img :src="url" width="100px" alt="">
        <div :class="classbox"> 去格雷码</div>
        <div :class="{act: isOk}">2.定义isOK绑定单个类名, 以对象的形式</div>
        <div :class="{act: isOK, box:isOK}">3绑定多个类名, 以对象的形式</div>
        <div :class="isOK ? 'box':'act'">4.三元运算符 绑定类名</div>
        <div :class="['act','box']">5.数组的方式绑定多个类名</div>
        <div :style="{color:'red',fontSize:size}">6.直接绑定样式</div>
        <div :style="obj">7.绑定style</div>
    </div>
</template>



<script>
    export default{
        data(){
            return{
                url:"https://img2.baidu.com/it/u=1552106092,2626691830&fm=253&fmt=auto&app=138&f=JPEG?w=583&h=500",
                width:"100px",
                classbox:"act",
                isOk:false,
                size:"60px",
                obj:{
                    color:"green",
                    fontSize:"40px"
                }

            }
        },
        methods:{

        },
    }
</script>
<style scoped>
    .act{
        background-color: red;
    }
    .box{
        font-size: 30px;
    }
</style>